<template>
  <view class="page flex-col">
    <view class="group_3 flex-col">
      <view class="image-text_3 flex-col">
        <view class="group_1 flex-col"></view>
        <text class="text-group_1">
          伏羲东方
          <br />
          数字化智慧云平台
        </text>
      </view>
      <text class="text_13">加入班级</text>
      <view class="box_3 flex-col">
        <view class="list_3 flex-col">
          <view class="text-wrapper_2 flex-row justify-between" >
            <text class="text_10">教师姓名</text>
            <input class="text_5" v-model="info.teacher_name" type="text" placeholder="请输入教师姓名"/>
          </view>
          <view class="text-wrapper_2 flex-row justify-between" >
            <text class="text_10">邀请码</text>
            <input class="text_5" v-model="info.invide_code" type="text" maxlength="4" placeholder="请输入班级邀请码"/>
          </view>
        </view>
      </view>
      <view class="box_4 flex-col">
        <view class="text-wrapper_3 flex-col" @click="goNext">
          <text class="text_7">下一步</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      loopData0: [],
      constants: {},
      info:{
        teacher_name: '',
        invide_code: '',
      },
    };
  },
  methods: {

    async goNext(){

      if(this.info.teacher_name == ''){
        uni.showToast({
          title: '请输入教师姓名',
          icon: "none",
        })
        return
      }
      if(this.info.invide_code == ''){
        uni.showToast({
          title: '请输入班级邀请码',
          icon: "none",
        })
        return
      }
      let param = {
        "teacher_name": this.info.teacher_name,
        "invide_code": this.info.invide_code,
      }
      let res = await this.API.StudentJoinClass(param)
      console.log('res',res)
      uni.setStorageSync('class_student_id', res.class_student_id);
      uni.navigateTo({
        url: '/pages/login/register3'
      });
    },
  },
};
</script>


<style scoped lang="less">
.page {
  background-color: rgba(248, 248, 248, 1);
  position: relative;
  width: 750rpx;
  height: 100%;
  overflow: hidden;
}

.block_1 {
  background-color: rgba(255, 255, 255, 1);
  padding: 28rpx 28rpx 22rpx 42rpx;
}

.box_7 {
}

.text-wrapper_5 {
  width: 108rpx;
  height: 40rpx;
  overflow-wrap: break-word;
  font-size: 0;
  letter-spacing: -0.2800000011920929px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  line-height: 40rpx;
}

.text_11 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 28rpx;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
}

.text_12 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 28rpx;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
}

.thumbnail_8 {
  width: 34rpx;
  height: 22rpx;
  margin: 8rpx 0 10rpx 438rpx;
}

.thumbnail_9 {
  width: 30rpx;
  height: 22rpx;
  margin: 6rpx 0 12rpx 10rpx;
}

.image_5 {
  width: 50rpx;
  height: 24rpx;
  margin: 6rpx 0 10rpx 10rpx;
}

.box_8 {
  width: 666rpx;
  margin: 42rpx 12rpx 0 2rpx;
}

.thumbnail_10 {
  width: 40rpx;
  height: 40rpx;
  margin: 2rpx 0 10rpx 0;
}

.text_3 {
  overflow-wrap: break-word;
  color: rgba(38, 38, 38, 1);
  font-size: 36rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  line-height: 52rpx;
}

.thumbnail_4 {
  width: 40rpx;
  height: 8rpx;
  margin: 22rpx 0 22rpx 0;
}

.group_3 {
  padding: 92rpx 0 4rpx 0;
}

.image-text_3 {
  width: 288rpx;
  align-self: center;
}

.group_1 {
  background-color: rgba(255, 255, 255, 1);
  width: 180rpx;
  height: 180rpx;
  margin: 0 56rpx 0 52rpx;
}

.text-group_1 {
  width: 288rpx;
  height: 88rpx;
  overflow-wrap: break-word;
  color: rgba(38, 38, 38, 1);
  font-size: 36rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  line-height: 44rpx;
  margin-top: 36rpx;
}

.text_13 {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 28rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 48rpx;
  margin: 64rpx 606rpx 0 32rpx;
}

.box_3 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 12px;
  align-self: center;
  margin-top: 24rpx;
  width: 702rpx;
  padding: 0 32rpx 0 32rpx;
}

.list_3 {
  height: 256rpx;
}

.text-wrapper_2 {
  box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
  background-color: rgba(255, 255, 255, 1);
  width: 638rpx;
  padding: 36rpx 0 40rpx 0;
}

.text_5 {
  width: 268rpx;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 32rpx;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 52rpx;
}

.text_6 {
  width: 256rpx;
  overflow-wrap: break-word;
  color: rgba(191, 191, 191, 1);
  font-size: 32rpx;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 52rpx;
}

.box_4 {
  background-color: rgba(255, 255, 255, 1);
  margin-top: 484rpx;
  padding: 20rpx 46rpx 18rpx 46rpx;
  position: absolute;
  bottom: 0;
}

.text-wrapper_3 {
  background-color: rgba(39, 118, 255, 1);
  border-radius: 6px;
  padding: 24rpx 278rpx 20rpx 276rpx;
}

.text_7 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 34rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  line-height: 48rpx;
}

.image_6 {
  width: 268rpx;
  height: 10rpx;
  align-self: center;
  margin-top: 72rpx;
}

</style>